<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,body{
            height: 100%;
        }
        body{
            margin: 0;
            height: 100%;
            background: url('img/hd4.png') no-repeat 0 0 / cover;
            padding-top: 105vw;
        }
        .time{
            width: 100vw;
            height: 6vw;
            /* background: #f00; */
            font: bold 5vw/6vw '';
            color: #486ef6;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="time"><span id="dateBox">2022-07-28</span> <span id="timeBox">08:55:32</span></div>

    <script>

    var d = new Date();
    var year = d.getFullYear();
    var month = d.getMonth()+1;
    var date = d.getDate();

        int();
        function int(){
            dateBox.innerHTML = year + '-' + addZero(month) + '-' + addZero(date);
            timeBox.innerHTML = d.getHours() + ':' + addZero(d.getMinutes()) + ':' + addZero(d.getSeconds());
            setInterval(function(){
                var d = new Date();
                timeBox.innerHTML = d.getHours() + ':' + addZero(d.getMinutes()) + ':' + addZero(d.getSeconds());
            },1000);
        }

        function addZero(n){
            return n < 10 ? '0' + n : n;
        }
    </script>
</body>
</html>